import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    FlatList,
    NativeModules,
    ScrollView
} from 'react-native';
var RNBridgeModule= NativeModules.RNBridgeModule;
import { MtChar } from 'martian-ui';
const { MtW1, MtW3, MtL3, MtLabel } = MtChar;
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
import { fetchRoomList } from '../action/girlAction';
//引用插件
import Echarts from 'native-echarts';
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');

class ShowEnergyUsage extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {


    }
    render() {

        const option = {
            title: {
                text: '能耗'
            },
            tooltip: {
                trigger: 'axis',
            },
            toolbox: {
                //改变icon的布局朝向
                //orient: 'vertical',
                show: true,
                showTitle: true,
                feature: {
                    //show是否显示表格，readOnly是否只读
                    dataView: { show: false, readOnly: false },
                    magicType: {
                        //折线图  柱形图    总数统计 分开平铺
                        type: ['line', 'bar', 'stack'],
                    },
                },
            },
            xAxis: [
                {
                    //就是一月份这个显示为一个线段，而不是数轴那种一个点点
                    boundaryGap: false,
                    type: 'category',
                    name: '天',
                    data:  ["7.21","7.22","7.23","7.24","7.25","7.26"],
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '度数(KWH)',
                },
            ],

            series: [{
                name: '能耗',
                type:'line',
                smooth:true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: 'rgb(255, 70, 131)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: 'rgb(255, 158, 68)'
                    }
                },
                data: [5, 12, 11, 10, 10, 20]
            }]
        };


        return (
            <View style={{ flex: 1, backgroundColor:'#fff' }}>
                <Echarts option={option} height={300}width={width} />
            </View>
        );
    }
}




module.exports = ShowEnergyUsage;